<script setup lang="ts">
//商品展示界面
import {ref} from "vue"
import DiscountBox from "~/components/shop/discountBox.vue";

const props = defineProps({
  data: {
    type: Object,
    default: null
  },
  dataCategoryList: {
    type: Array,
    default: null
  }
})

const emits = defineEmits(["clickAdd", 'clickBuy']);

const commandInfo = ref({
  id: "",
  number: 1,
  level: 1,
  multiplier: 0,
  isBluePic: false,
  nowPrice: "0.00",
  commodity: {}
})

const commodityImage = ref(props.data.image);
watch(() => props.data, (val) => {
  commodityImage.value = '';
  commandInfo.value.id = props.data.id;
  commandInfo.value.number = 1;
  commandInfo.value.level = 1;
  commandInfo.value.multiplier = 0;
  commandInfo.value.isBluePic = false;
  commandInfo.value.nowPrice = calcResultPrice();
  commandInfo.value.commodity = props.data;
  commodityImage.value = props.data.image;
})

commandInfo.value.id = props.data.id;
commandInfo.value.commodity = props.data;

function checkNumber() {
  if (commandInfo.value.number < 1) {
    commandInfo.value.number = 1;
  }
  if (commandInfo.value.number > 100) {
    commandInfo.value.number = 100;
  }
  commandInfo.value.number = commandInfo.value.number | 0;
}

function checkLevel() {
  if (commandInfo.value.level < 1) {
    commandInfo.value.level = 1;
  }
  if (commandInfo.value.level >= props.data.levelTop) {
    commandInfo.value.level = props.data.levelTop - 1;
  }
  commandInfo.value.level = commandInfo.value.level | 0;
}

function checkMultiplier() {
  if (commandInfo.value.multiplier < 0) {
    commandInfo.value.multiplier = 0;
  }
  commandInfo.value.multiplier = commandInfo.value.multiplier | 0;
}

function calcResultPrice() {
  let result = constantStore().calc(commandInfo.value.isBluePic, commandInfo.value.multiplier, props.data.multiplierUp, commandInfo.value.level, props.data.levelUp, props.data.price, commandInfo.value.number,props.data.discount);
  commandInfo.value.nowPrice = result;
  return result;
}
</script>

<template>
  <div class="commodityInfo-box">
    <div class="commodity-pic-box">
      <el-avatar shape="square" :size="100" :src="commodityImage"/>
    </div>
    <div class="commodity-name-box">
      <el-tooltip class="box-item" :content="data.name" placement="top" effect="dark">
        {{ data.name }}
      </el-tooltip>
    </div>
    <div class="commodity-msg-box">
      <div class="msg-item">
        <div class="item-title">
          价格：
        </div>
        <div class="item-value">
          <div class="now-money money">
            {{ data.price }}
          </div>
          <div class="base-money money" v-if="data.price!==data.basePrice">
            {{ data.basePrice }}
          </div>
        </div>
      </div>
      <div class="msg-item" v-if="props.data.levelUp && props.data.levelUp > 0">
        <div class="item-title">
          等级：
        </div>
        <div class="item-value">
          <el-input v-model="commandInfo.level" type="number" @input="checkLevel()"/>
        </div>
      </div>
      <div class="msg-item"
           v-if="props.data.commodityCategory.hasMultiplier&&props.data.commodityCategory.hasMultiplier === '1' ">
        <div class="item-title">
          品质：
        </div>
        <div class="item-value">
          <el-input v-model="commandInfo.multiplier" type="number" @input="checkMultiplier()"/>
        </div>
      </div>
      <div class="msg-item"
           v-if="props.data.commodityCategory.hasPic && props.data.commodityCategory.hasPic === '1' ">
        <div class="item-title">
          是否蓝图：
        </div>
        <div class="item-value">
          <el-checkbox v-model="commandInfo.isBluePic" size="large"/>
        </div>
      </div>
      <div class="msg-item">
        <div class="item-title">
          数量 <span v-if="props.data.commodityCategory.unit">/{{ props.data.commodityCategory.unit }}</span>：
        </div>
        <div class="item-value">
          <el-input v-model="commandInfo.number" type="number" @input="checkNumber()"/>
        </div>
      </div>
      <div class="msg-item">
        <div class="item-title">
          总价：
        </div>
        <div class="item-value money">
          {{ calcResultPrice() }}
        </div>
      </div>
    </div>
    <div class="commodity-btn-box">
      <el-button type="primary" @click="emits('clickAdd',commandInfo)">加入购物车</el-button>
      <el-button type="success" :disabled="true" @click="emits('clickBuy',commandInfo)">购 买</el-button>
    </div>
    <div class="total-discount">
      <discount-box :discount="data.discount"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.commodityInfo-box {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  margin: .4rem .7rem;
  padding: .4rem .7rem;
  user-select: none;
  border-radius: 1rem;
  background-color: #ffffff;
  max-width: 12rem;
  box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, 0.5); //阴影效果 阴影水平偏移量（负值表示向左移动）。  阴影垂直偏移量（负值表示向上移动）。 模糊半径（越大越模糊）。 扩展半径（正值使阴影扩展，负值使阴影收缩）。阴影颜色，可以使用任何有效的 CSS 颜色值。

  .total-discount {
    position: absolute;
    padding: .3rem;
    top: -1rem;
    left: -1.1rem;
    color: white;
    border-radius: 10%;
  }

  .money::after {
    content: "￥";
  }

  .commodity-name-box {
    margin: .5rem 0;
    max-width: 8rem;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 使用省略号表示溢出 */
  }

  .commodity-btn-box {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0;
  }

  .commodity-msg-box {
    display: flex;
    flex-direction: column;

    .now-money {
      font-weight: bolder;
      font-size: 1.2rem;
    }

    .base-money {
      display: inline-block;
      color: #aaabaa;
      font-size: .8rem;
      margin: 0 .2rem;
      text-decoration: line-through;
    }

    .msg-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item-title {
        color: #aaabaa;
        font-weight: bolder;
      }

      .item-value {
        max-width: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

    }
  }

}
</style>